<script>
import logo from '../tools/logo'
export default {
  components: {
    logo
  },
  props: {
    collapsed: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data () {
    return {
      routes: [],
      selectedKeys: [],
      openKeys: [],
      cachedOpenKeys: [],
      rootSubmenuKeys: []
    }
  },
  created () {
    this.routes = this.$router.options.routes.find(n => n.path === '/').children
    this.routes.map((v) => {
      this.rootSubmenuKeys.push(v.name)
    })
    // 初始化选中目录和打开的菜单
    this.menuInit()
  },
  watch: {
    '$route': {
      handler: function (to, from) {
        // 路由跳转重新渲染菜单
        if (from !== undefined) {
          this.menuInit()
        }
      },
      immediate: true
    },
    collapsed (val) {
      if (val) {
        this.cachedOpenKeys = this.openKeys
        this.openKeys = []
      } else {
        this.openKeys = this.cachedOpenKeys
      }
    }
  },
  methods: {
    select ({ key }) {
      this.selectedKeys = [key]
    },
    menuInit () {
      this.selectedKeys = [this.$route.name]
      let routeKeys = [...this.$route.matched]
      routeKeys.shift()
      const filterKeys = routeKeys.filter(n => n.name !== this.selectedKeys[0])
      let openKeys = []
      filterKeys.map(v => {
        openKeys.push(v.name)
      })
      this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
    },
    onOpenChange (openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : []
      }
    }
  },
  render () {
    const recursion = (routes) => {
      return routes.map(v => {
        if (v.children) {
          return (
            <a-sub-menu key={v.name}>
              <span slot="title">
                {v.meta && v.meta.icon ? (<a-icon type={ v.meta && v.meta.icon ? v.meta.icon : '' } />) : null}
                <span>{v.meta && v.meta.title ? v.meta.title : ''}</span>
              </span>
              { recursion(v.children) }
            </a-sub-menu>)
        } else {
          if (!v.hidden) {
            return (
              <a-menu-item key={v.name}>
                <router-link to={{name: v.name}}>
                  {v.meta && v.meta.icon ? (<a-icon type={ v.meta && v.meta.icon ? v.meta.icon : '' } />) : null}
                  <span>{v.meta && v.meta.title ? v.meta.title : ''}</span>
                </router-link>
              </a-menu-item>
            )
          }
        }
      })
    }
    return (
      <div class="s-menu">
        <logo />
        <a-menu
          theme="dark"
          class="menu"
          mode="inline"
          selectedKeys={this.selectedKeys}
          openKeys={this.openKeys}
          onSelect={this.select}
          onOpenChange={this.onOpenChange}
        >
          { recursion(this.routes) }
        </a-menu>
      </div>
    )
  }
}
</script>

<style scoped>
.s-menu{
  height: 100%;
}
.menu{
  padding: 16px 0;
}
</style>
